import React from 'react'
import { View, SafeAreaView, StyleSheet } from 'react-native'
import { Header } from 'react-native-elements'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

const Tab = createMaterialTopTabNavigator();

import HotTab from './tabs/hot'
import FollowTab from './tabs/follow'
import TcTab from './tabs/ab'

import { HeaderTitle } from '~/components/header'

class Component extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
    const { navigation } = this.props

    return (
      <View style={styles.view}>
        <Header
          placement="left"
          centerComponent={ HeaderTitle('Chit Chat') }
          rightComponent={{
            icon: 'add',
            color: '#fff',
            onPress: () => navigation.navigate('DiscussCreate')
          }}
        ></Header>

        <SafeAreaView style={{flex: 1}}>
          <Tab.Navigator tabBarOptions={{tabStyle: {width: 80} }}>
            <Tab.Screen name="热门" component={HotTab} />
            <Tab.Screen name="关注" component={FollowTab} />
            <Tab.Screen name="附近" component={TcTab} />
          </Tab.Navigator>
        </SafeAreaView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    backgroundColor: 'white'
  }
})

export default Component
